<template>
    <a-modal class="rolePop" :visible="roleModel" @cancel="onCloseIconFn" @ok="onMapModel" width="70%" title="角色绑定" centered :maskClosable="false" destroyOnClose>
        <div class="MultipleChoice">
            <a-checkbox-group v-model="checkedArr" @change="onChange" style="width: 100%">
                <a-row>
                    <a-col :span="4" v-for="v in MultipleRolesData" :key="v.id">
                        <a-checkbox :value="v.id" class="checkclass">{{v.roleName}}</a-checkbox>
                    </a-col>
                </a-row>
            </a-checkbox-group>
        </div>
<!--        <template slot="footer">-->
<!--            <a-button type="primary" @click="onMapModel">确定</a-button>-->
<!--        </template>-->
    </a-modal>
</template>

<script>
    export default {
        name: "RolePop.vue",
        data(){
            return {
                roleModel:false,
                MultipleRolesData:[],
                userId:"",
                checkedArr:[],
            }
        },
        methods:{
            // 获取数据
            getData() {
                this.istree = false;
                this.$api.postRoleFindByPage({current: 1,size: 10000}).then((res) => {
                    console.log(res.data)
                    if (res.data.code == 0) {
                        this.MultipleRolesData = res.data.data;
                    } else {
                        this.$message.info(res.data.errorMessage);
                    }
                });
                this.$api.roleFindRoleByUserId(this.userId).then((res) => {
                    if (res.data.code == 0) {
                        res.data.data.forEach(v=>{
                            this.checkedArr.push(v.id)
                        })
                    }else {
                        this.$message.warning(res.data.errorMessage)
                    }
                });
            },
            // 提交表单
            onMapModel(){
                let arr = []
                this.checkedArr.forEach(v=>{
                    let obj = {
                        roleId:v,
                    }
                    arr.push(obj)
                })
                console.log(arr)
                this.$api.roleUserBindRole(this.userId,arr).then(res=>{
                    if(res.data.code == 0){
                        this.roleModel = false;
                        this.checkedArr = [];
                        this.$message.info(res.data.errorMessage)
                    }else {
                        this.$message.warning(res.data.errorMessage)
                    }
                })
            },
            // chang事件
            onChange(checkedValues){
                // console.log(checkedValues)
            },
            // 弹窗关闭
            onCloseIconFn(){
                var self = this;
                self.roleModel = false;
                self.MultipleRolesData = [];
                self.userId = "";
                self.checkedArr = [];
                // this.$confirm({
                //     title: "是否确认关闭弹窗？",
                //     centered: true,
                //     onOk() {
                //         self.roleModel = false;
                //         self.MultipleRolesData = [];
                //         self.userId = "";
                //         self.checkedArr = [];
                //     },
                //     onCancel() {
                //         return;
                //     },
                // });
            }
        },
        mounted() {

        }
    }
</script>

<style scoped lang="scss">
    .rolePop{
        .MultipleChoice{
            width: 100%;
            min-height: 300px;
        }
        .checkclass{
            font-size: 18px;
        }
    }
</style>